<template>
  <px-scrollbar v-if="!isMain" class="view-equip-detail" v-loading="loading">
    <div class="equip-header">
      <px-button type="primary" icon="ArrowLeft" @click="backMainPage">返回</px-button>
      <div class="equip-header-title">
        {{ props.rowData.eqpId }} {{ props.rowData.eqpName }} <span v-if="props.rowData.showName">（{{ props.rowData.showName }}）</span>
      </div>
    </div>
    <CustomTabs :tabList="tabList" :activeName="activeName" @tabSelect="handelTabSelected" />
    <IndexStatus
      v-if="activeName === 'first'"
      :rowData="props.rowData"
      :equipmentTitle="equipmentTitle"
      :tableData="tableData"
      @queryTable="queryTable"
      @queryPage="queryPage"
    />
    <pagination
      v-if="activeName === 'first'"
      v-show="total > 0"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      class="equip-table-pagination"
      :total="total"
      @pagination="queryTable"
    />
    <Pid v-if="activeName === 'pid'" :pidUrl="props.rowData.pidUrl" :eqpId="props.rowData.eqpId" />
    <RunRecord v-if="activeName === 'second'" :rowDataVal="props.rowData" :eqpId="props.rowData.eqpId" />
    <EpmRecord v-if="activeName === 'third'" :eqpId="props.rowData.eqpId" />
    <MaintainRecord v-if="activeName === 'fourth'" :eqpId="props.rowData.eqpId" />
    <InspectRecord v-if="activeName === 'fifth'" :eqpId="props.rowData.eqpId" />
    <FaultRecord v-if="activeName === 'fault'" :eqpId="props.rowData.eqpId" />
    <PointCheckRecord v-if="activeName === 'sixth'" :eqpId="props.rowData.eqpId" />
    <AlarmRecord v-if="activeName === 'seventh'" :eqpId="props.rowData.eqpId" />
    <SparPartsRecord v-if="activeName === 'eighth'" :eqpId="props.rowData.eqpId" />
  </px-scrollbar>
</template>
<script setup lang="ts">
import { reactive, toRefs, watch, computed } from "vue";
import useWebSocket from "@/hooks/useWs";
import CustomTabs from "@/components/Tabs/index.vue";
import IndexStatus from "./IndexStatus.vue";
import Pid from "./Pid.vue";
import RunRecord from "./RunRecord.vue";
import EpmRecord from "./EpmRecord.vue";
import FaultRecord from "./FaultRecord.vue";
import MaintainRecord from "./MaintainRecord.vue";
import InspectRecord from "./InspectRecord.vue";
import PointCheckRecord from "./PointCheckRecord.vue";
import AlarmRecord from "./AlarmRecord.vue";
import SparPartsRecord from "./SparPartsRecord.vue";
import { queryPointList } from "@/api/equip/archive";
import { getEquipStatusTime } from "@/api/equip/runManage";

// 调用父级-返回主页、查询列表方法
const emits = defineEmits(["backMainPage"]);
// 父级传过来的值
const props = defineProps(["isMain", "rowData"]);
// 显示隐藏
const isMain = computed(() => props.isMain);
// 页面本身的值
const state = reactive<any>({
  tabList: [
    { name: "first", label: "指标动态" },
    { name: "pid", label: "设备PID图" },
    { name: "second", label: "设备运行记录" },
    { name: "third", label: "设备保养记录" },
    { name: "fourth", label: "设备维修记录" },
    { name: "fifth", label: "设备巡检记录" },
    { name: "fault", label: "设备缺失记录" },
    { name: "sixth", label: "异常点检记录" },
    { name: "seventh", label: "设备报警记录" },
    { name: "eighth", label: "备品备件更换记录" }
  ],
  activeName: "first",
  tableData: [],
  equipmentTitle: {},
  loading: false,
  queryParams: {
    pageNum: 1,
    pageSize: 20
  },
  total: 0
});
const { tabList, activeName, tableData, equipmentTitle, loading, queryParams, total } = toRefs(state);
// 监视isMain
watch(isMain, async val => {
  if (!val) {
    handelTabSelected("first");
  }
});
// 点击tab显示页面详情
const handelTabSelected = selectName => {
  activeName.value = selectName;
  if (activeName.value === "first") {
    queryParams.value = {
      pageNum: 1,
      pageSize: 20
    };
    queryPage();
  }
};
// 返回主页面
const backMainPage = () => {
  emits("backMainPage");
};
// 获取时间
const queryStatusTime = async () => {
  equipmentTitle.value = await getEquipStatusTime({
    attributeType: "DYNAMIC",
    id: props.rowData.id,
    twinModelId: props.rowData.twinModelId,
    eqpId: props.rowData.eqpId
  });
};
// 获取表格
const queryTable = async () => {
  loading.value = true;
  const data = await queryPointList({ eqpIdList: [props.rowData.eqpId], ...queryParams.value });
  data?.data.forEach(item => {
    item.isShowVisual = item.showOnVisualization === 1 ? true : false;
  });
  tableData.value = data?.data || [];
  total.value = data?.total;
  loading.value = false;
  useWebSocket({
    queryStr: `ws/twin`,
    needRepeat: true, //需要多次建立
    onmessage: wsCallback
  });
};
// 获取页面内容
const queryPage = () => {
  queryStatusTime();
  queryTable();
};
// 动态属性ws
function wsCallback(data) {
  if (data) {
    try {
      if (tableData.value && tableData.value.length > 0) {
        let wsdata = data;
        for (let key in wsdata) {
          tableData.value.forEach(item => {
            if (item.positionNum === key) {
              item.attributeValue = wsdata[key];
            }
          });
        }
      }
    } catch (error) {
      console.error(error);
    }
  }
}
</script>
<style lang="scss" scoped>
.view-equip-detail {
  position: relative;
  width: 100%;
  height: calc(100vh - 126px);
  padding: 0 24px;
  background-color: #fff;
  border-radius: 8px;

  .equip-header {
    display: flex;
    margin-top: 16px;
    margin-bottom: 8px;

    .equip-header-title {
      height: 32px;
      margin-left: 16px;
      font-size: 18px;
      font-weight: bold;
      line-height: 32px;
      color: rgb(0 0 0 / 80%);
    }
  }
  :deep(.px-pagination) {
    right: 0px;
  }
}
</style>
